<template>
    <van-config-provider theme="dark">
        <van-nav-bar title="" left-text="返回" left-arrow @click-left="onClickLeft" :border="false" fixed placeholder
            class="van-nav-bar">
        </van-nav-bar>
    </van-config-provider>


    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="OnRefresh">
        <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="OnLoad">
            <div class="bodydiv" v-for="(list, index) in followlist" :key="index" @click="ToInfo(list.user.id)">
                <van-image width="5rem" height="5rem" round fit="cover" class="img" :src="list.user.avatar_url" />
                <div>
                    <p>{{ list.user.username }}</p>
                    <p>{{ list.user.school_text }}</p>
                </div>
                <van-button type="danger" class="van-button-follow" v-if="list.is_follow"
                    @click="unfollow(list.user.id, index)">取消关注</van-button>
                <van-button type="primary" class="van-button-follow" v-else
                    @click="follow(list.user.id, index)">关注</van-button>
            </div>
        </van-list>
    </van-pull-refresh>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const user = proxy.$user.value;
const followlist = ref([])

const page = ref(1);
const finished = ref(false)
const isLoading = ref(false);
const loading = ref(false);

// 下拉刷新
const OnRefresh = () => {
    isLoading.value = true;
    loading.value = true;
    finished.value = false;
    followlist.value = [];
    page.value = 1;

    setTimeout(OnLoad, 1500)
};


// 上拉加载
const OnLoad = async () => {
    if (isLoading.value === true) isLoading.value = false;
    const params = {
        page: page.value,
        userid: user.id,
    }

    const res = await proxy.$http.post({
        url: '/user/getfollowlist',// 接口地址
        params
    })

    loading.value = false;
    // finished.value = true;

    if (res.code === 1) {
        let count = res.data.count;
        followlist.value = followlist.value.concat(res.data.item);

        if (followlist.value.length >= count) {
            finished.value = true;
            return false;
        }

        page.value += 1;
    } else {
        finished.value = true;
        proxy.$fail(res.msg);
    }
}

//关注
const follow = async (id, index) => {
    const params = {
        followid: id,
        userid: user.id,
    }
    const res = await proxy.$http.post({
        url: '/user/follow',// 接口地址
        params
    })
    if (res.code === 1) {
        proxy.$toast(res.msg);
        followlist.value[index].is_follow = !followlist.value[index].is_follow;
    } else {
        proxy.$fail(res.msg);
    }
}

//取消关注
const unfollow = async (id, index) => {
    const params = {
        followid: id,
        userid: user.id,
    }
    const res = await proxy.$http.post({
        url: '/user/unfollow',// 接口地址
        params
    })
    if (res.code === 1) {
        proxy.$toast(res.msg);
        followlist.value[index].is_follow = !followlist.value[index].is_follow;
    } else {
        proxy.$fail(res.msg);
    }
}

//跳转个人信息
const ToInfo = (id) => {
    proxy.$router.push({ path: '/user/userinfo', query: { userid: id } })
}

//返回
const onClickLeft = () => {
    proxy.$router.back();
}

</script>

<style scoped>
* {
    margin: 0;
}

.bodydiv {
    display: flex;
    background-color: rgb(25, 25, 25);
    height: 6.5rem;
    align-items: center;
    position: relative;
    margin-bottom: 0.2rem;
}

.bodydiv>.img {
    margin-left: 1rem;
}

.bodydiv>div {
    margin-left: 1rem;
    height: 5rem;
}

.bodydiv>div>p:nth-child(1) {
    font-size: 1.2rem;
    height: 3rem;
    line-height: 3rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.bodydiv>div>p:nth-child(2) {
    font-size: 1rem;
    line-height: 2rem;
    line-height: 2rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: rgba(255, 255, 255, 0.5);
}

.van-button-follow {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    width: 4rem;
    height: 2rem;
    transform: translateY(-50%);
    right: 0.5rem;
}
</style>
